import React, { useState } from 'react';
import { Space, Table, Row, Divider,Select } from "antd";
import getData from '../../../compontens/GetData/getData.jsx'; 

const columns = [
  {
    title: 'Percentage',
    dataIndex: 'Percentage',
    key: 'Percentage',

  },
  {
    title: 'CladeReads',
    dataIndex: 'CladeReads',
    key: 'CladeReads',
  },
  {
    title: 'TaxonReads',
    dataIndex: 'TaxonReads',
    key: 'TaxonReads',
  },
  {
    title: 'TaxRank',
    dataIndex: 'TaxRank',
    key: 'TaxRank',
  },
  {
    title: 'TaxID',
    dataIndex: 'TaxID',
    key: 'TaxID',
  },
  {
    title: 'Name',
    dataIndex: 'Name',
    key: 'Name',
  },
];

export default class kraken_annotation extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [],
            kra_result: {},
            options: [],
        }
    }

    get_data = (file_Name) => {
      getData(file_Name)
      .then(result => {
        // 在这里处理返回的数据
        var lines = result.split('\n');
        var data = [];
        for (var i = 1; i < lines.length; i++) {
          var line = lines[i];
          var columns = line.split('\t');
          if (columns.length > 1) {
            data.push({
              Percentage: columns[0],
              CladeReads: columns[1],
              TaxonReads: columns[2],
              TaxRank: columns[3],
              TaxID: columns[4],
              Name: columns[5],
            });
          }
        }
        this.setState({data: data});
      })
      .catch(error => {
        alert('Error');
      });      
    }

    componentDidMount() {
      // const kra_result = localStorage.getItem('kra_result');
      const kra_result =  {
        "IDList": ["M0018C_2_month", "M0018C_1_month", "M0018C_3_month", "M0018C_14_day", "M0018C_birth", "M0018M_3_month", "M0018M_gest", "M0018M_birth"],
        "kra_path": "data/Result/1/Kraken_result",
        "result_path": "data/Result/1",
        "sankey_path": "data/Result/1/sankey",
        "krona_path": "data/Result/1/Krona_result",
        "classification_path": "data/Result/1/Kraken_result",
        "diversity_path": "data/Result/1/diversity"
      }
      if(!kra_result){
        return;
      }

      const options = kra_result.IDList.map((item) => {
        return {
          value: item,
          label: item,
        }
      })
      const defaultValue = kra_result.IDList[0];
      this.setState({
        kra_result: kra_result,
        options : options,
        defaultValue: defaultValue,
      })
      const file_Name = kra_result.kra_path +'/' + kra_result.IDList[0] + '.bracken.report';
      this.get_data(file_Name);
    }
    handleChange = (value) => {
      const file_Name = this.state.kra_result.kra_path +'/' + value + '.bracken.report';
      this.get_data(file_Name);
    };

    render() {
      const data = this.state.data;
      const options = this.state.options;
      const defaultValue = localStorage.getItem('defaultValue')
        return (
            <div>
                <Select 
                  style={{
                    width: "100%",
                    textAlign: "center",
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "center"
                }}
                  defaultValue={defaultValue} options={options} onChange={this.handleChange}/>
                <Divider orientation="left">Taxonomic identification results</Divider>
                <Row>
                  <Table style={{ width: '100%'}} columns={columns} dataSource={data} />
                </Row>
            </div>
        )
    }
}